<script lang="ts" setup>
import SportCover from '~/assets/imgs/sport-game-cover.png';
import { normalizeGameInfo } from '~/pages/play/helpers';

type TDetail = NonNullable<Api.GetData<typeof apis.apiGameAll>['game_list'][number]['game']>[number];

const props = defineProps<{
  detail: TDetail;
}>();

const router = useRouter();
const appStore = useAppStore();
const detail = computed(() => normalizeGameInfo(props.detail)!);
const src = computed(() => {
  if (detail.value.sport)
    return SportCover;
  const cover = detail.value.image_cover;
  return cover ? cover.startsWith('http') ? cover : appStore.joinCdnPath(cover) : '';
});
const loading = useBoolean(!!src.value);
const showDefaultCover = useBoolean(!src.value);
const maintenanceTip = ref(false);

function onLoad() {
  showDefaultCover.setFalse();
  loading.setFalse();
}

function onError() {
  showDefaultCover.setTrue();
  loading.setFalse();
}

function toGame() {
  const info = normalizeGameInfo(props.detail)!;

  if (info.status === 2) {
    if (!maintenanceTip.value)
      setTimeout(() => maintenanceTip.value = true);
    return;
  }

  const params = { gameCode: info.code };

  // 如果是独立游戏，则打开一个新的窗口
  if (info.open_method === 1) {
    const playRoute = router.resolve({ name: RN.PLAY, params });
    window.open(`${location.origin}${playRoute.fullPath}`, '_blank');
    return;
  }

  // 如果是体育游戏，则跳转到体育游戏页面
  if (info.sport)
    router.push({ name: RN.SPORTS, params });
  else
    router.push({ name: RN.PLAY, params });

  globalPopups.userProfile.close();
}
</script>

<template>
  <div class="game-cover relative" :class="{ loading: loading.is }" @click="toGame">
    <!-- 封面 -->
    <img
      :src="src"
      class="abs-full rounded-2 object-cover"
      :class="{ 'playable': detail.status !== 2, 'op-0': showDefaultCover.is, '!object-fill': detail.image_cover.startsWith('http') } "
      draggable="false" loading="lazy" fetchpriority="low"
      @error="onError" @load="onLoad"
    >

    <!-- 默认封面 -->
    <div
      v-if="(showDefaultCover.is || loading.is) && detail.status > 0"
      class="default-game-cover abs-full rounded-2"
      :class="{ playable: detail.status !== 2 } "
    >
      <div class="absolute bottom-[6%] left-[6%] right-[6%] text-center">
        <div class="mb-0.5 text-sm">
          {{ detail.ename }}
        </div>
        <div class="text-xs text-sys-text-body">
          {{ detail.game_provider_detail?.name }}
        </div>
      </div>
    </div>

    <!-- 标签 -->
    <div v-if="detail.status === 1" class="absolute left-[5%] right-[5%] top-[4%] z-1 flex flex-wrap">
      <img v-if="detail.is_top" class="w-[35%]" src="../../assets/icons/top.svg">
      <img v-if="detail.is_hot && !detail.is_top" class="w-[35%]" src="../../assets/icons/hot.svg">
    </div>

    <!-- 维护中 -->
    <div
      v-if="detail.status === 2"
      class="abs-full flex cursor-not-allowed items-center justify-center backdrop-grayscale"
    >
      <ATooltip
        v-model:open="maintenanceTip" placement="top" overlayClassName="max-w35"
        :title="$t('f8gcyI8MeDcdRawzbgNWi')"
        :trigger="['click', 'focus', 'hover']"
        :getPopupContainer="(el) => el.parentElement!"
      >
        <i class="i-local:maintain text-7" />
      </ATooltip>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.game-cover {
  &::before {
    content: '';
    display: block;
    padding-bottom: 131.4%;
  }

  &.loading {
    background-color: #3e404c;
    mask-image: linear-gradient(-50deg, #0008, #0008 45%, #000e, #0008 55%, #0008);
    mask-size: 400% 100%;
    animation: scann 0.7s linear infinite;
    border-radius: 9px;
  }
}

.playable {
  cursor: pointer;
  transition: all 70ms cubic-bezier(0.4, 0, 0.2, 1);

  @media (hover: hover) {
    &:hover {
      transform: scale(1.03);
    }
  }

  &:active {
    transform: scale(0.97);
  }
}

.default-game-cover {
  background: url('./imgs/default-cover.png') no-repeat center/100%;
}

@keyframes scann {
  0% {
    mask-position: 90% 0;
  }
  100% {
    mask-position: 10% 0;
  }
}
</style>
